<template>
  <div class="footer">  	
    <tabbar>
      <tabbar-item :selected="this.$route.path === '/' || this.$route.path === '/home'" link="/">
        <img slot="icon" src="@/assets/icon01.png">
        <img slot="icon-active" src="@/assets/icon06.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :selected="this.$route.path === '/publicWelfare'" link="/publicWelfare">
        <img slot="icon" src="@/assets/icon02.png">
        <img slot="icon-active" src="@/assets/icon07.png">
        <span slot="label">公益</span>
      </tabbar-item>
      <tabbar-item :selected="this.$route.path === '/goods'" link="/goods">
        <img slot="icon" src="@/assets/icon03.png">
        <img slot="icon-active" src="@/assets/icon08.png">
        <span slot="label">商城</span>
      </tabbar-item>
      <tabbar-item class="img-person" :selected="this.$route.path === '/offLine'" link="/offLine">
        <img slot="icon" src="@/assets/icon04.png">
        <img slot="icon-active" src="@/assets/icon09.png">
        <span slot="label">门店</span>
      </tabbar-item>
      <tabbar-item class="img-person" :selected="this.$route.path === '/personal'" link="/personal">
        <img slot="icon" src="@/assets/icon05.png">
        <img slot="icon-active" src="@/assets/icon10.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem } from 'vux'

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data () {
      return {
        phone: '',
        time: null,
      }
    },
    created () {
      this.timeout()
      // this.phone = sessionStorage.phone
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      timeout () {
        this.time = setInterval(() => {
          if(sessionStorage.phone){
            clearInterval(this.time)
            this.phone = sessionStorage.phone
          }
        })
      }
    }
  }
</script>

<style type="text/css">
  #app .weui-tabbar{height: 4.9rem;position: fixed;background-color: #fff;}
  #app .weui-tabbar .weui-bar__item_on .weui-tabbar__label span{color: #172F6D;font-size: 1.1rem;}
  #app .weui-tabbar .weui-tabbar__label span{color: #999;font-size: 1.1rem;}
  .weui-tabbar .weui-tabbar__icon{width: 2.2rem;height: 2.2rem;}
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label,.weui-tabbar__label .active{color: #36c3bf!important;}
  .weui-tabbar__item{text-decoration: none;}
</style>
